<script setup>
    import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
    import MyWangEditor from '../../components/MyWangEditor.vue'
    import { ElMessage } from 'element-plus'
    const associationInfo = ref({
        "introduction":"",
        "structure":"",
        "statutes":"",
        "contact":"",
        "significance":"",
        "applicationForm":"",
        "applicationForm2":[]
    })


    //文件删除的方法
    const handleRemove = (file, uploadFiles) => {
        console.log(file, uploadFiles)
    }

    //数据提交
    import { infoAddService,InfoGetService } from '../../api/info'
    const onSubmit = async()=>{
        // console.log(associationInfo.value)
        // let formData = JSON.parse(JSON.stringify(associationInfo.value))
        // formData.applicationForm = associationInfo.value.applicationForm2[0].response.data
        associationInfo.value.applicationForm = associationInfo.value.applicationForm2[0].response.data
        let result = await infoAddService(associationInfo.value)
        ElMessage.success(result.data.message?result.data.message:"上传成功")
    }

    //文件上传请求头token设置
    const headers = ref({
        "token":localStorage.getItem('token')
    }) 

    //获取协会信息数据
    const getAssociation = async()=>{
        let resut = await InfoGetService()
        associationInfo.value = resut.data.data
        let index = associationInfo.value.applicationForm.lastIndexOf("_")
        let fileName = associationInfo.value.applicationForm.split("_").slice(1).join("_")
        associationInfo.value.applicationForm2 = [{
            name:fileName,
            response:{
                data:associationInfo.value.applicationForm
            }
        }]
    }
    getAssociation()


    //下载点击文件
    const onPreview = ()=>{
        const imageUrl = associationInfo.value.applicationForm;
        const link = document.createElement('a');
        link.href = imageUrl;
        link.download = 'image.jpg';
        link.click();
    }

</script>
<template>
    <div class="container">
        <el-card class="scroll-box" style="max-width: 100%;height: 730px;">
            <el-form
                label-position="left"
                label-width="auto"
                style="max-width: 100%"
                v-model="associationInfo"
            >
                <el-form-item label="协会介绍" >
                    <MyWangEditor  v-model="associationInfo.introduction"/>
                </el-form-item>
                <el-form-item label="组织架构">
                    <MyWangEditor  v-model="associationInfo.structure"/>
                </el-form-item>
                <el-form-item label="协会章程">
                    <MyWangEditor  v-model="associationInfo.statutes"/>
                </el-form-item>
                <el-form-item label="联系协会">
                    <MyWangEditor  v-model="associationInfo.contact"/>
                </el-form-item>
                <el-form-item label="加入协会的意义">
                    <MyWangEditor  v-model="associationInfo.significance"/>
                </el-form-item>


                <!-- 文件上传 -->
                  <el-upload
                    v-model:file-list="associationInfo.applicationForm2"
                    class="upload-demo"
                    action="http://localhost:8080/upload"
                    multiple
                     :headers="headers"
                    :on-remove="handleRemove"
                    :on-preview="onPreview"
                    :limit="1"
                >
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                    <div class="el-upload__tip">
                        jpg/png 文件/文件大小大于500KB
                    </div>
                    </template>
                </el-upload>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div> 
</template>

<style>
    .container{
        padding: 20px;
    }

    /* 滚动条 */
    .scroll-box {
      overflow-y: auto; /* 当内容超过高度时显示垂直滚动条 */
      border: 1px solid #ccc;
      padding: 10px;
      box-sizing: border-box;
    }
</style>